<template>
    <div>
      <div class="search">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="Approved by">
            <el-input
              v-model="formInline.user"
              placeholder="Approved by"
              clearable
            />
          </el-form-item>
  
          <el-form-item label="Activity time">
            <el-date-picker
              v-model="formInline.date"
              type="date"
              placeholder="Pick a date"
              clearable
            />
          </el-form-item>
          <el-form-item label="Activity zone">
            <el-select
              v-model="formInline.region"
              placeholder="Activity zone"
              clearable
            >
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="Activity zone">
          <el-select
            v-model="formInline.region"
            placeholder="Activity zone"
            clearable
          >
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="Activity zone">
          <el-select
            v-model="formInline.region"
            placeholder="Activity zone"
            clearable
          >
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="Activity zone">
          <el-select
            v-model="formInline.region"
            placeholder="Activity zone"
            clearable
          >
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="Activity zone">
          <el-select
            v-model="formInline.region"
            placeholder="Activity zone"
            clearable
          >
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
          <el-form-item>
            <el-button type="primary">Query</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table">
        <el-table
          ref="tableRef"
          :height="tableHeightMinxins"
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column prop="id" label="Date" />
          <el-table-column prop="name" label="Name" />
          <el-table-column prop="value" label="Address" />
        </el-table>
      </div>
      <div class="pagination">
   <!-- 这里可以放置展示数据的表格等其他相关组件 -->
   <Pagination :total="dataTotal" @current-change="handleCurrentChange" @size-change="handleCurrentChange" />
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, toRefs, onMounted } from "vue";
  import api from "@/services/api";
  import { tableMixin } from "@/util/tableMinxins";
  import Pagination from "@/components/Pagination.vue"
  // import { useTablePagination } from "@/util/TablePagination";
  const { tableRef, tableHeightMinxins } = tableMixin();
  const formInline = ref({});
  const tableData = ref([{
    id:'1',
    name:'张三',
    value:'12'
  },
  {
    id:'1',
    name:'张三',
    value:'12'
  },
  {
    id:'1',
    name:'张三',
    value:'12'
  },{
    id:'1',
    name:'张三',
    value:'12'
  },{
    id:'1',
    name:'张三',
    value:'12'
  },{
    id:'1',
    name:'张三',
    value:'12'
  },{
    id:'1',
    name:'张三',
    value:'12'
  },{
    id:'1',
    name:'张三',
    value:'12'
  },{
    id:'1',
    name:'张三',
    value:'12'
  },{
    id:'1',
    name:'张三',
    value:'12'
  },{
    id:'1',
    name:'张三',
    value:'12'
  },{
    id:'1',
    name:'张三',
    value:'12'
  },{
    id:'1',
    name:'张三',
    value:'12'
  },{
    id:'1',
    name:'张三',
    value:'12'
  },{
    id:'1',
    name:'张三',
    value:'12'
  },{
    id:'1',
    name:'张三',
    value:'12'
  },{
    id:'1',
    name:'张三',
    value:'12'
  },{
    id:'1',
    name:'张三',
    value:'12'
  },{
    id:'1',
    name:'张三',
    value:'12'
  },{
    id:'1',
    name:'张三',
    value:'12'
  },{
    id:'1',
    name:'张三',
    value:'12'
  },{
    id:'1',
    name:'张三',
    value:'12'
  }]);
  const dataTotal  = ref(400);
  
  const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`);
  };
  // const { tableData, currentPage, pageSize, total, handleSizeChange, handleCurrentChange } = useTablePagination(getBookList);
  onMounted(() => {
    // fetchDataFromServer();
    // ceshiPost();
  });
  const ceshiPost = () => {
    let obj = {
      regionCode: "410100",
    };
    api.getRegionInfo(obj).then((res) => {
      console.log("res", res);
    });
  };
  
  const fetchDataFromServer = () => {
    api
      .selectCity()
      .then((response) => {
        console.log("response", response);
        // tableData.value= response;
        console.log(tableData);
      })
      .catch((error) => {
        // Handle the error
        console.error(error);
      });
  };
  const onSubmit = () => {
    console.log("111");
  };
  </script>
  
  <style scoped lang="less">
  .pagination{
    background-color: #fff;
  }
  </style>